<template>
    <div class="take_order_list">
        <top-timer pathName="Home"/>
        <p class="font_M col_333 font_40 title center">可取衣物如下</p>
        <p class="col_999 font_28 center">请支付后开箱取衣，前往手机客户端支付</p>
        <div class="scroll_box">
            <div class="order_card " v-for="list in deliveryList">
                <div class="order_info overflow col_999 font_28">
                    <span class="fl">订单：{{list.orderCode}}</span>
                    <span class="fl">{{list.orderStatusName}}</span>
                    <span class="fr">配送流水：{{list.sendCode}}</span>
                </div>
                <div class="list_haed font_30 col_666 center">
                    <span class="w20">箱隔号</span>
                    <span class="w20">衣物</span>
                    <span class="w20">数量</span>
                    <span class="w10">状态</span>
                    <span class="w30">操作</span>
                </div>
                <div class="row" v-for="item in list.deliveries">
                    <span class="w20">{{item.boxCode}}</span>
                    <span class="w20 txt_overflow">{{item.goodsName }}</span>
                    <span class="w20">{{item.deliveryNum}}</span>
                    <span class="w10">{{item.takeStatusName}}</span>
                    <span class="w30"
                          :class="list.orderStatus==='02'|| list.orderStatus==='06'? 'canOpen' : ''"
                          @click="openBox(item.boxCode,list.sendCode)">
                        <span v-if="list.orderStatus==='02' || list.orderStatus==='06'&&  item.takeStatus==='00'">
                            {{item.takeStatus==='00'?'开箱取衣':''}}
                        </span>
                    </span>
                </div>
            </div>
        </div>
        <div class="btn_box">
            <el-button type="primary" class="col_fff font_M font_40" @click="openBox('all')">全部开箱</el-button>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'take-order-list',
    data() {
      return {
        open: true,
        deliveryList: [],
      };
    },
    created() {
      this.selectDeliveryByUserIdAndCabinetId();
    },
    methods: {
      // 获取用户可取订单衣物
      selectDeliveryByUserIdAndCabinetId() {
        this.$axios.get('pickupClothesRest/selectDeliveryByUserIdAndCabinetId', {
          params: {
            cabinetId: localStorage.getItem('cabinetId'),
          },
        }).then(res => {
          this.deliveryList = res.data;
        });
      },
      // 开箱
      openBox(boxCode, sendCode) {
        var params = [];
        if (boxCode === 'all') {
          for (let g of this.deliveryList) {
            for (let f of g.deliveries) {
              if (g.orderStatus === '02' && f.takeStatus === '00') {
                params.push({boxCode: f.boxCode, sendCode: g.sendCode});
              }
            }
          }
        } else {
          params.push({boxCode: boxCode, sendCode: sendCode});
        }
        if (params.length === 0) {
          this.$alert('没有可以可取的衣物，请检查订单是否付款');
          return;
        }
        let promises = [];
        for (let param of params) {
          setTimeout(()=>{
            promises.push(this.callOpen(param.boxCode));
          },200)
        }
        Promise.all(promises).then((result) => {
          params = params.filter(item => {
            let index = result.findIndex(i => { i === item.boxCode; });
            return index < 0;
          });
          this.$router.push({path: 'TakeOpenCupboard', query: {arr: JSON.stringify(params), type: ''}});
        });
      },
      callOpen(boxCode) {
        return new Promise((resolve, reject) => {
          let success = () => {
            this.$axios.post('pickupClothesRest/openBoxByPickup', {
              boxCode: boxCode,
              cabinetId: localStorage.getItem('cabinetId'),
            }).then(res => {
              if (res.data.result) {
                resolve('');
              } else {
                this.$alert(res.data.msg || '开箱错误');
                reject(boxCode);
              }
            });
          };
          let error = () => {
            reject(boxCode);
            this.$alert('开箱失败，请联系客服，联系方式见屏幕下方！');
          };
          let boxMac = this.$boxConfig[boxCode];
          window.cordova.plugins.CabinetPlugin.sendOpenBoxCommand(boxMac, success, error);
        });

      },
    },
  };
</script>

<style lang="scss">
    .take_order_list {
        .title {
            margin: 0.40rem 0 0.20rem;
        }

        .w10 {
            width: 10%;
        }

        .w20 {
            width: 20%;
        }

        .w30 {
            width: 30%;
        }

        .w40 {
            width: 40%;
        }

        .scroll_box {
            padding-top: 0.2rem;
            margin-top: 0.20rem;
            overflow-y: scroll;
            height: 5.8rem;
            margin-bottom: 0.9rem;
        }

        .order_card {
            margin-bottom: 0.4rem;
            padding: 0 0.80rem;

            span {
                vertical-align: middle;
                display: inline-block;
            }

            .order_info {
                margin-bottom: 0.20rem;

                .fl {
                    margin-right: 0.40rem;
                }
            }

            .list_haed {
                padding: 0.20rem 0;
                background: rgba(236, 245, 252, 1);
                border-radius: 0.08rem 0.08rem 0rem 0rem;
            }

            .row {
                color: #666666;
                font-size: 0.28rem;
                text-align: center;
                padding: 0.20rem 0;
                border-bottom: 0.02rem solid #CAE5FD;

                .open {
                    color: #999999;
                }

                .canOpen {
                    color: #0A82EC;
                }
            }
        }

        button {
            width: 2.4rem;
            height: 0.80rem;
            font-size: 0.40rem;
            border-radius: 0.70rem;
            background-color: #0A82EC;
            display: block;
            margin: auto;
            padding: 0;
        }
    }
</style>
